<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/zTreeStyle.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.ztree.all.min.js"></script>
</head>
<body>
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</body>
</html>
<script>
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        } ,
        async: {
            enable: true,
            url:"/TestZTree/test",
            autoParam:["id", "name", "level"],
            otherParam:{"otherParam":"zTreeAsyncTest"},
            //dataType:"json",//返回数据类型
            dataFilter: filter//异步返回后经过filter
        },
        callback:{
            //beforeAsync: zTreeBeforeAsync,// 异步加载事件之前得到相应信息
            asyncSuccess: zTreeOnAsyncSuccess,//异步加载成功的fun
            asyncError: zTreeOnAsyncError,   //加载错误的fun
            beforeClick:beforeClick //捕获单击节点之前的事件回调函数
        }
    };
    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i=0, l=childNodes.length; i<l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }

    function beforeClick(treeId,treeNode){
        if(!treeNode.isParent){
            alert("请选择父节点");
            return false;
        }else{
            return true;
        }
    }

    function zTreeOnAsyncError(event, treeId, treeNode){
        alert("异步加载失败!");
    }

    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){
        console.log("异步加载成功！")
    }


    var zNodes =[
        { id:1, pId:0, name:"父1"},
        { id:11, pId:1, name:"parentNode 11",isParent:true},
        { id:111, pId:11, name:"leafNode 111"},
        { id:112, pId:11, name:"leafNode 112"},
        { id:12, pId:1, name:"parentNode 12",isParent:true},
        { id:121, pId:12, name:"leafNode 121"},
        { id:13, pId:1, name:"parentNode 13", isParent:true},
        { id:2, pId:0, name:"父2", isParent:true}
    ];

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
</script>